<template>
  <div class="container">
    <div class="header">
      <div class="header-left">左侧</div>
      <div class="header-right">
        <el-dropdown>
          <span class="el-dropdown-link">
            下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>选项1</el-dropdown-item>
              <el-dropdown-item>选项2</el-dropdown-item>
              <el-dropdown-item>选项3</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <div class="middle">
      <div class="grid">
        <Chart1 />
        <Chart2 />
        <Chart3 />
        <Chart4 />
        <Chart5 />
        <Chart6 />
        <Chart7 />
        <Chart8 />
        <Chart9 />
      </div>
    </div>
    <div class="footer">底部</div>
  </div>
</template>

<script>
import Chart1 from './components/Chart1.vue';
import Chart2 from './components/Chart2.vue';
import Chart3 from './components/Chart3.vue';
import Chart4 from './components/Chart4.vue';
import Chart5 from './components/Chart5.vue';
import Chart6 from './components/Chart6.vue';
import Chart7 from './components/Chart7.vue';
import Chart8 from './components/Chart8.vue';
import Chart9 from './components/Chart9.vue';

export default {
  components: {
    Chart1,
    Chart2,
    Chart3,
    Chart4,
    Chart5,
    Chart6,
    Chart7,
    Chart8,
    Chart9,
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  padding-right: 20px;
  background-color: #9e9cfa;
}
.header-left,
.header-right {
  flex: 1;
}
.header-right {
  text-align: right;
  padding-left: 20px;
}
.middle {
  flex: 1;
  overflow: auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  row-gap: 50px;
  padding: 10px;
}
.footer {
  padding: 10px;
  background-color: #aad2ff;
}
</style>